<template>
    <h2 style="text-align: center">生产派工质检列表</h2>
    <br>
    <el-button @click="deleteSFQI()" type="danger">删除</el-button>
    <el-button @click="updateSFQI()" type="success">修改</el-button>
    <br>
    <br>
    <!-- 查询 -->
    <el-form :inline="true" :model="from" class="demo-form-inline">
        <el-form-item label="产品名称">
            <el-input v-model="from.PName" placeholder="请输入 " clearable />
        </el-form-item>
        <el-form-item label="质检人员">
            <el-input v-model="from.SWFIPeople" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="SFQIShow()">查询</el-button>
        </el-form-item>
    </el-form>
    <br>
    <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChanges">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="swfqiCode" label="单据编号" width="280px" />
        <el-table-column prop="swfiDate" label="质检日期">
            <template v-slot="scop">
                {{ scop.row.swfiDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="swfiSource" label="来源类型" />
        <el-table-column prop="pName" label="产品名称" />
        <el-table-column prop="pSpec" label="规格" />
        <el-table-column prop="swfiPeople" label="质检人员" />
        <el-table-column prop="typeOfQC" label="质检类型" />
        <el-table-column prop="theNumberOfSubmissions" label="质检数量" />
        <el-table-column prop="numberOfRework" label="返工数量" />
        <el-table-column prop="scrappedQuantity" label="报废数量" />
        <el-table-column prop="qualifiedQuantity" label="合格数量" />
        <el-table-column prop="rate" label="合格率" />
        <el-table-column prop="qualityInspectionResults" label="质检结果" />
    </el-table>

    <!-- 分页 -->
    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, sizes" prev-text="上一页"
                    next-text="下一页" :total="page.totalcount">
                    共{{ page.pagecount }}条数据，每页{{ page.pagesize }}条，共{{ page.pageindex }}/{{ page.totalcount }}页
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, prev, pager, next" prev-text="上一页"
                    next-text="下一页" :total="page.totalcount">
                    <el-button :disabled="page.pageindex == 1" @click="page.pageindex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize"
                    :page-sizes="[5, 10, 15, 20]" :background="true" layout="slot, jumper" prev-text="上一页"
                    next-text="下一页" :total="page.totalcount">
                    <el-button :disabled="page.pageindex == page.totalcount"
                        @click="page.pageindex = page.totalcount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang='ts'>
import { reactive, ref, onMounted, computed, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '../../../http.js';
import { useRouter } from 'vue-router';
const router = useRouter();

onMounted(() => {
    SFQIShow()
})

const page = reactive({
    pageindex: 1,
    pagesize: 10,
    pagecount: 0,
    totalcount: 0,
})
const from = reactive({
    PName: '',
    SWFIPeople: ''
})
watch(page, () => {
    SFQIShow()
})

const tableData = ref([])
const SFQIShow = () => {
    axios.get(http.zblnb + '/sc/api/SWFQI/SelectSendWorkersForQualityInspection', {
        params: {
            pageindex: page.pageindex,
            pagesize: page.pagesize,
            PName: from.PName,
            SWFIPeople: from.SWFIPeople
        }
    })
        .then(res => {
            console.log(res.data.data.list)
            tableData.value = res.data.data.list
            page.pagecount = res.data.data.pagecount
            page.totalcount = res.data.data.totalcount
        })
}

const ids = ref([])
const handleSelectionChanges = (val: any) => {
    ids.value = val
}

// 删除
const deleteSFQI = () => {
    // 判断是否选中
    if (ids.value.length == 0) {
        ElMessage.error('请选择要删除的数据')
        return
    }
    // 弹窗确认
    ElMessageBox.confirm('确定要删除选中的数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            // 发送请求
            let newids = ids.value.map((item: any) => item.sendWorkersForQualityInspectionId)
            axios.post(http.zblnb + '/sc/api/SWFQI/DeleteSendWorkersForQualityInspection', {
                ids: newids
            })
                .then(res => {
                    if (res.data.data == 1) {
                        ElMessage.success('删除成功')
                        //0.5秒后刷新页面
                        setTimeout(() => {
                            SFQIShow()
                        }, 500)
                    }
                })
        })
}

const updateSFQI = () => {
    // 判断是否选中
    if (ids.value.length == 0 || ids.value.length > 1) {
        ElMessage.error('请选择要删除的数据')
        return
    } else {
        router.push({
            name: 'SFQIUpdate',
            query: {
                id: ids.value[0].sendWorkersForQualityInspectionId
            }
        })
    }

}
</script>


<style></style>